<template>
  <div class="execution">
    <basic-container>
      <el-card class="filter-container" shadow="never">
        <div style="margin-top: 10px">
          <el-form :inline="true" size="small" label-width="140px">
            <el-form-item label="平台：">
              <el-select v-model="listQuery.platformId" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="getList" type="primary" size="small"
                >查询结果</el-button
              >
              <el-button @click="handleResetSearch" size="small">
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <div style="margin-top: 10px">
        <el-table
          :data="list"
          border
          :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }">
          <el-table-column
            label="店铺名称"
            align="center"
            prop="storeName"
          ></el-table-column>
          <el-table-column
            label="经营公司"
            align="center"
            prop="companyName"
          ></el-table-column>
          <el-table-column
            label="所属平台"
            align="center"
            prop="platformName"
          ></el-table-column>
          <el-table-column
            label="是否默认"
            prop="display"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-switch
                style="display: block"
                v-model="scope.row.isDefault"
                @change="handleUpdate(scope.$index, scope.row)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="默认"
                inactive-text="否"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="是否显示在APP中"
            prop="display"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-switch
                style="display: block"
                v-model="scope.row.isDisplay"
                @change="handleShowUpdate(scope.$index, scope.row)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="排序值"
            prop="sort"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-input-number
                size="mini"
                v-model="scope.row.sort"
                controls-position="right"
                @change="handleChange(scope.row)"
                :min="1"
                :max="10"
                oninput="value=value.replace(/[^0-9.]/g,'')"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            label="操作人"
            align="center"
            prop="editName"
          ></el-table-column>
          <el-table-column
            label="操作时间"
            align="center"
            prop="editTime"
          ></el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.size"
          :page-sizes="[5, 10, 15]"
          :current-page.sync="listQuery.current"
          :total="total"
        >
        </el-pagination>
      </div>
    </basic-container>
  </div>
</template>
<script>
import "@/styles/index.scss";
import {
  platformAll,
  platformStoreList,
  platformStoreSort,
  platformStoreIsDefault,
  platformStoreIsDisplay,
} from "@/api/rms/rmsstore";

export default {
  data() {
    return {
      options: [],
      listQuery: {
        current: 1,
        size: 10,
        platformId: null,
      },
      list: [],
      total: 0,
    };
  },
  created() {
    this.getList();
    this.getPlatformAll();
  },
  methods: {
    getPlatformAll() {
      platformAll().then((res) => {
        this.options = res.data.data;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      platformStoreList(this.listQuery).then((res) => {
        let list = res.data.data.records;
        list.forEach((item) => {
          if (item.isDefault === 1) {
            item.isDefault = true;
          } else if (item.isDefault === 2) {
            item.isDefault = false;
          }

          if (item.isDisplay === 1) {
            item.isDisplay = true;
          } else if (item.isDisplay === 2) {
            item.isDisplay = false;
          }
        });
        this.list = list;
        this.total = res.data.data.total;
      });
    },
    handleResetSearch() {
      this.listQuery.platformId = "";
      this.getList();
    },
    handleChange(value) {
      let params = {
        storeId: value.storeId,
        platformId: value.platformId,
        sort: value.sort,
      };
      platformStoreSort(params).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: res.data.msg,
            type: "success",
            duration: 1000,
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning",
            duration: 1000,
          });
        }
        this.getList();
      });
    },
    handleUpdate(index, row) {
      let onOff = null;
      if (row.isDefault === true) {
        onOff = 1;
      } else if (row.isDefault === false) {
        onOff = 2;
      }
      let params = {
        is: onOff,
        storeId: row.storeId,
      };
      platformStoreIsDefault(params).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: res.data.msg,
            type: "success",
            duration: 1000,
          });
          this.getList();
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning",
            duration: 1000,
          });
        }
      });
    },

    handleShowUpdate(index, row) {
      let onOff = null;
      if (row.isDisplay === true) {
        onOff = 1;
      } else if (row.isDisplay === false) {
        onOff = 2;
      }
      let params = {
        storeId: row.storeId,
        is: onOff,
      };
      platformStoreIsDisplay(params).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: res.data.msg,
            type: "success",
            duration: 1000,
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning",
            duration: 1000,
          });
        }
        this.getList();
      });
    },
  },
};
</script>